<template>
  <div class="home">
    <breadcrumb-view/>
    <div class="content">
      <div class="title">
        <div class="title-left">
          <el-image class="t-img" :src="$route.query.icon" />
          <div class="t_l">
            <p class="t_l_t">{{$route.query.name}}</p>
            <p class="t_l_c">{{$route.query.desc}}</p>
          </div>
        </div>

        <el-button
          type="primary"
          class="t_l_btn"
          size="mini"
          icon="el-icon-plus"
          @click="addApp"
        >添加模块</el-button>
      </div>
      <el-divider></el-divider>

      <ul class="list-c">
        <template v-for="item in list">
          <div :key="item.id" class="fx-app-item">
            <el-dropdown class="p_btn">
              <el-button type="text">
                <el-image :src="setting" style="width:16px;height:16px;" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="editApp(item)">修改模块</el-dropdown-item>
                <el-dropdown-item @click.native="delApp(item)">删除模块</el-dropdown-item>
                <el-dropdown-item @click.native="pushApp(item)" v-if="item.launchStatus == 0">发布模块</el-dropdown-item>
                <el-dropdown-item @click.native="intoModule(item)">进入表单</el-dropdown-item>
                <el-dropdown-item @click.native="intoDict(item)">进入字典</el-dropdown-item>
                <el-dropdown-item @click.native="intoMap(item)">进入地图</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-image :src="item.moduleIcon"  />
            <p class="app-title">{{ item.moduleName }}</p>
          </div>
        </template>
      </ul>
    </div>
    <el-dialog title="添加模块" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="模块名称" prop="moduleName">
          <el-input v-model="form.moduleName" placeholder="请输入模块名称"></el-input>
        </el-form-item>
        <el-form-item label="模块排序" prop="seqNo">
          <el-input-number v-model="form.seqNo" :min="1" placeholder="请输入模块排序"></el-input-number>
        </el-form-item>
        <el-form-item label="模块图标" prop="moduleIcon">
          <el-upload
            class="upload-demo"
            ref="upload"
            :limit="1"
            accept=".svg"
            action="#"
            :on-change="changeUpload"
            :auto-upload="false"
            :show-file-list="false"
          >
            <el-image
              :src="form.moduleIcon"
              v-if="form.moduleIcon"
              style="width: 100px; height: 100px"
            />
            <el-button type="primary" v-else>上传图标</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { api } from "../server/api";
import baseUrl from "../server/env";
import breadcrumbView from "../components/breadcrumbView"
import { getFile } from "../untils/uploadImg";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        moduleName: "",
        seqNo: 1,
        moduleIcon: ""
      },

      setting: require("../assets/img/setting.png"),
      module: require("../assets/img/module.png"),
      list: [],
      name: "",
      showurl: baseUrl.showurl,
      rules: {
        moduleName: [
          { required: true, message: "请输入模块名称", trigger: "blur" }
        ],
        seqNo: [{ required: true, message: "请输入模块排序", trigger: "blur" }],
        moduleIcon: [
          { required: true, message: "请输入模块icon", trigger: "blur" }
        ]
      },
      upload: {
        // 设置上传的请求头部this.token
        // headers: { authorization: "" + this.token },
        // 上传的地址
        url: "#"
      }
    };
  },
  mounted() {
    this.stdappModuleLst();
    this.name = this.$route.query.name;
    console.log(this.$route.query);
  },
  methods: {
    stdappModuleLst() {
      const { id } = this.$route.query;
      api.stdappModuleLst({ appId: id }).then(res => {
        this.list = res;
      });
    },
    addApp() {
      this.form = {
        moduleName: "",
        seqNo: 1,
        moduleIcon: ""
      };
      this.dialogVisible = true;
    },

    handleClose(done) {
      this.$refs.form.resetFields();
      // this.$refs.form.resetFields();
      done();
    },

    changeUpload(file) {
      console.log(file);
      let fileName = "";
      const nameData = file.name.split(".");
      if (Array.isArray(nameData)) {
        fileName = nameData[nameData.length - 1];
      }
      getFile(file.raw, callback => {
        console.log(callback);
        const par = {
          name: fileName,
          data: callback
        };
        api.uploadImg(par).then(res => {
          this.$set(this.form, "moduleIcon", `${this.showurl + res}`);
          console.log(this.form);
          this.$refs.upload.clearFiles();
        });
      });

      //
    },

    deletAppitem(data) {
      const { moduleId } = data;
      api.stdappModuleDel({ moduleId }).then(res => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.stdappModuleLst();
      });
    },
    pushAppItem(data) {
      const { moduleId } = data;

      api.stdappModuleLaunch({ moduleId }).then(res => {
        this.$message({
          type: "success",
          message: "发布成功!"
        });
        this.stdappModuleLst();
      });
    },
    pushApp(data) {
      this.$confirm("确定要发布该模块?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.pushAppItem(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发布"
          });
        });
    },
    delApp(data) {
      this.$confirm("此操作将永久删除该模块, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deletAppitem(data);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    intoModule(item) {
      this.$router.push({
        name: "fromlist",
        query: { id: item.moduleId, name: item.moduleName }
      });
    },
    intoDict(item) {
      this.$router.push({
        name: "dictTable",
        query: { id: item.moduleId, name: item.moduleName }
      });
    },
    intoMap(item){
      this.$router.push({
        name: "maplist",
        query: { id: item.moduleId, name: item.moduleName }
      });
    },
    intoDataManage(item) {
      this.$router.push({
        name: "dataManage",
        query: { id: item.moduleId, name: item.moduleName }
      });
    },
    editApp(data) {
      this.dialogVisible = true;
      const { moduleId } = data;
      api.stdappModuleDetail({ moduleId }).then(res => {
        console.log(res);
        this.form = res;
      });
    },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.moduleId != undefined) {
            api.stdappModuleUpd(this.form).then(response => {
              this.$message.success("修改成功");
              this.dialogVisible = false;
              this.stdappModuleLst();
            });
          } else {
            const par = {
              appId: this.$route.query.id,
              ...this.form
            };
            api.stdappModuleAdd(par).then(response => {
              this.$message.success("新增成功");
              this.dialogVisible = false;
              this.stdappModuleLst();
            });
          }
        }
      });
    }
  },
  components:{
    breadcrumbView
  }
};
</script>
<style lang="scss" scoped>
.home {
  box-sizing: border-box;
  padding: 0 20px;
   .content {
    background-color: #ffffff;
    .el-divider {
      margin: 0px 0 27px;
    }
    .title {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 17px 22px;
      width: 100%;
      height: 104px;
      .title-left {
        display: flex;
        .t-img {
          width: 57px;
          height: 57px;
          min-width: 57px;
          min-height: 57px;
        }
        .t_l {
          display: flex;
          height: 100%;
          flex-direction: column;
          padding-left: 13px;
          p {
            margin: 0px;
            padding: 0px;
          }
          .t_l_t {
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
            font-weight: bold;
            line-height: 28px;
            padding-bottom: 4px;
          }
          .t_l_c {
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            line-height: 22px;
            // width: 784px;
          }
        }
      }
      .t_l_btn {
        background-color: rgba(67, 201, 168, 1);
        border-color: rgba(67, 201, 168, 1);
        width: 111px;
        height: 34px;
        cursor: pointer;
      }
    }
    .list-c {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      overflow: auto;
      align-content: flex-start;
      margin: 0px;
      padding: 0 15px;
      height: calc(100vh - 245px);
      overflow: auto;
      .fx-app-item {
        width: 128px;
        height: 110px;
        min-width: 128px;
        min-height: 110px;
        box-sizing: border-box;
        padding: 12px;
        margin: 15px;
        position: relative;
        background-color: rgba(244, 246, 247, 1);
        border-radius: 10px;
        color: rgba(102, 102, 102, 1);
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .el-image {
          width: 36px;
          height: 36px;
          min-width: 36px;
          min-height: 36px;
        }
        .p_btn {
          position: absolute;
          right: 9px;
          top: 9px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          .el-button {
            padding: 0px;
            .el-image {
              width: 16px;
              height: 16px;
              min-width: 16px;
              min-height: 16px;
            }
          }
          // background-color: #d43030;
        }
      }
      .fx-app-item:hover{
        border: 2px solid rgba(67, 201, 168, 1);
      }
    }
  }
}
</style>
